import { Upload as AntUpload, UploadProps, message } from 'antd';
import { InboxOutlined } from '@ant-design/icons';

const { Dragger } = AntUpload;

interface CustomUploadProps extends UploadProps {
  tip?: string;
}

export function Upload({ tip, ...props }: CustomUploadProps) {
  const defaultProps: UploadProps = {
    name: 'file',
    multiple: false,
    action: '/api/upload',
    onChange(info) {
      const { status } = info.file;
      if (status === 'done') {
        message.success(`${info.file.name} 上传成功`);
      } else if (status === 'error') {
        message.error(`${info.file.name} 上传失败`);
      }
    },
    ...props,
  };

  return (
    <Dragger {...defaultProps}>
      <p className="ant-upload-drag-icon">
        <InboxOutlined />
      </p>
      <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
      {tip && <p className="ant-upload-hint">{tip}</p>}
    </Dragger>
  );
}